<template>
	<Modal v-model="modal" class="modal-list-text">
		<Row class="mt-25">
            <ChoiseTable ref="table" :url="table.url" :async="false" :header="table.header" :currentCallBack="choise" ></ChoiseTable>
        </Row>
        <div slot="footer">
            <Button type="primary" :disabled="disabled" @click="ok">确定</Button>
            <Button @click="cancel">取消</Button>
        </div>
	</Modal>
</template>
<script>
	import {Row,Col,Modal,Page,Button} from 'iview';

	import ChoiseTable  from 'admin/components/table/choise';

	export default {
		props :{
            callback :{
            	type : Function,
            }
        },
		components:{
			Modal,
			Row,
            'ICol':Col,
            Page,
            ChoiseTable,
            Button,
		},
		data () {
			return {
				modal: false,
                table:{
            		url : '/wechat/function/reply/view/list',
            		header: []
            	},
            	disabled: true,
                choise_id : 0,
			}
		},
		methods: {
			getData(){
				this.$refs.table.init({page:1,length:10});
			},
			//分页获取
        	pageChange(page){
                this.getData();
            },
            //确定
            ok(){
            	this.modal = false;
            	this.callback(this.choise_id);
            },
            //取消
            cancel(){
            	this.modal = false;
            },
            //选择
            choise(row){
            	var id = row.id;
            	if(this.choise_id==id){
            		this.choise_id= 0;
            		this.disabled = true;
            	}else{
            		this.disabled = false;
            		this.choise_id = id;	
            	}
            }
		},
		created:function(){
        	this.table.header =  [
                {
			        title: '规则名',
			        key: 'ruleName'
			    },
			    {
			        title: '关键词',
			        key: 'keyword'
			    }
            ];
        },
        watch:{
        	modal(newVue,oldVue){
                this.disabled = true;
        		if(newVue){
        			this.getData();
        		}
        	}
        }
	}
</script>
<style>
	.mt-25{margin-top: 25px;}
</style>